<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 1200px;
				height: 600px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				/* background: url(./img/v.jpg) center center/100% no-repeat; */
			}

			.box>.sz {
				width: 30px;
				height: 600px;
				background-color: rgb(0, 255, 136);
				position: absolute;
				top: 0;
				left: calc(50% - 15px);
				transform-origin: center 580px;
				border-radius: 15px;
				transition: all 0.1s linear;
				background: url(../img/defaultInteriorBackgroundBanner.jpg) center center/cover no-repeat;
				opacity: 0.9;
			}

			.box>.ding {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: black;
				position: absolute;
				bottom: 10px;
				left: calc(50% - 10px);
				z-index: 2;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="ding"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
			<div class="sz"></div>
		</div>
		<script>
			//获取所需元素
			let sz = document.querySelectorAll('.box>.sz');
			//使每一个扇形导航条的背景使用不能精灵图位置
			for(var i=0;i<sz.length;i++){
				sz[i].style.backgroundPosition = `-${i * 30}px`
			}
			//取反 初始值
			var flg = true
			//点击按钮绑定事件
			document.querySelector('.box').onclick = function() {
				if (flg) {
					flg = !flg
					for (var i = 0; i < sz.length; i++) {
						sz[i].style.transform = `rotate(${-90  +  i * 10.6}deg)`
					}
				} else {
					flg = !flg
					for (var i = 0; i < sz.length; i++) {
						sz[i].style.transform = ``
					}
				}
			}
		</script>
	</body>

</html>